<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Q.Menu | Q.js</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- 使用QLib控件是必须包含样式表 -->
<link type="text/css" rel="stylesheet" href="../ui.css" />
<style>
/* start menu */

.q-contextmenu.wayixia-menu {
  border-width: 0;
  box-shadow:0 1px 15px rgba(0,0,0,.2);
  -moz-box-shadow:0 1px 15px rgba(0,0,0,.2);
  -webkit-box-shadow:0 1px 15px rgba(0,0,0,.2);
  min-width: 170px;
  background-image: none; 
  background-repeat: repeat-y;
  background-position: left top;
  background-color: #FFF;
  z-index: 910000;
}

.q-contextmenu.wayixia-menu .q-item {
  height: 30px;
  line-height: 30px;
}

.q-contextmenu.wayixia-menu .q-item .q-item-icon {
  width: 15px;
}

.q-contextmenu.wayixia-menu .q-item.q-seperator,
.q-contextmenu.wayixia-menu .q-item.q-seperator:hover
{
  height: 15px;
  background-color: none;
}

.q-contextmenu.wayixia-menu .q-item-seperator .q-line {
  left: 5px;
  background-color: #CCC;
}

.q-contextmenu.wayixia-menu .q-item .q-item-title {
  line-height: 30px;
  font-size: 14px;
}

.q-contextmenu.wayixia-menu .q-item:hover, 
.q-contextmenu.wayixia-menu .q-item.q-active 
{
  background-color: #;
}



</style>
<!--  
  提示：src="{QLib目录}/Q.js" 
  根据实际存放路径， 测试代码都是在QLib目录的samples文件夹下，所以这里用的是"../Q.js" 
-->
<script type="text/javascript" src="../src/Q.js"></script>
<script type="text/javascript" src="../src/stl.js"></script>
<script type="text/javascript" src="../src/contextmenu.js"></script>
<script>
  <!--

  // 全局菜单实例 class_menu
  var g_menu = null;

  Q.ready(function() 
  {
    // 初始化菜单
    g_menu = new Q.Menu({
      style: "wayixia-menu", 
      on_popup: function(popup) {
        if(popup) {
          Q.$('btnMenu').style.background = "red";
        } else {
          Q.$('btnMenu').style.background = "blue";
        }
      }
    });
    
    var m1 = new Q.MenuItem({
      text: "菜单一",
      callback : function(menuitem) {
        
      }
    });

    var m2 = new Q.MenuItem({
      text: "菜单二asdfdddddddd", 
      callback : function(menuitem) {
        
      }
    });

    var m3 = new Q.MenuItem({type: MENU_SEPERATOR, text: ""});
    var m4 = new Q.MenuItem({text: "子菜单ssssssssssssssssssssssssssssssssssssssssssssssss1", style:"wayixia-menu"});
    var m5 = new Q.MenuItem({text: "子菜单ssssssssssssssssssssssssssssssssssssssssssssssss2", style:"wayixia-menu"});
    var m6 = new Q.MenuItem({text: "子菜单ssssssssssssssssssssssssssssssssssssssssssssssss3", style:"wayixia-menu"});
    var m7 = new Q.MenuItem({text: "子菜单ssssssssssssssssssssssssssssssssssssssssssssssss4", style:"wayixia-menu"});
    var m8 = new Q.MenuItem({text: "子菜单ssssssssssssssssssssssssssssssssssssssssssssssss5", style:"wayixia-menu"});
    var m9 = new Q.MenuItem({text: "子菜单ssssssssssssssssssssssssssssssssssssssssssssssss6", style:"wayixia-menu"});
    var m10 = new Q.MenuItem({text: "子菜单ssssssssssssssssssssssssssssssssssssssssssssssss7", style:"wayixia-menu"});
    g_menu.addMenuItem(m1);
    g_menu.addMenuItem(m2);
    g_menu.addMenuItem(m3);
    g_menu.addMenuItem(m4);
    g_menu.addMenuItem(m5);
    g_menu.addMenuItem(m6);
    g_menu.addMenuItem(m7);
    g_menu.addMenuItem(m8);
    g_menu.addMenuItem(m9);
    g_menu.addMenuItem(m10);

    var m41 = new Q.MenuItem({
      style: "wayixia-menu",
      text: "子菜单一",
      callback : function(menuitem) {
        
      }
    });

    var m42 = new Q.MenuItem({
      text: "子菜单二asdfasdfasdf", 
      callback : function(menuitem) {
        alert('您点击的是子菜单二！');
      }
    });
    
    m4.addSubMenuItem(m41);
    m4.addSubMenuItem(m42);

   var m421 = new Q.MenuItem({
      text: "子菜单二asdfasdfasdf", 
      callback : function(menuitem) {
        alert('您点击的是子菜单二！');
      }
    });

    m42.addSubMenuItem(m421);

    g_menu.hide();

    
    g_menu2 = new Q.Menu({
      style: "", 
      on_popup: function(popup) {
        if(popup) {
          Q.$('btnMenu').style.background = "red";
        } else {
          Q.$('btnMenu').style.background = "blue";
        }
      }
    });

    var m2_1 = new Q.MenuItem({
      text: "复制", 
      callback : function(menuitem) {
        return 1;
      }
    });
    var m2_2 = new Q.MenuItem({
      text: "粘贴", 
      callback : function(menuitem) {
        alert('粘贴成功！');
      }
    });

    var m2_3 = new Q.MenuItem({
      text: "移动", 
      callback : function(menuitem) {
        alert('移动成功！');
      }
    });
    g_menu2.addMenuItem(m2_1);
    g_menu2.addMenuItem(m2_2);
    g_menu2.addMenuItem(m2_3);

    g_menu2.hide();

    g_menubar = new Q.MenuBar({container: 'q-menubar'});
    g_menubar.append(Q.$('menu-file'), g_menu);
    g_menubar.append(Q.$('menu-edit'), g_menu2);
    //g_menubar.append(Q.$('btnMenu'), g_menu2);

    Q.$('btnMenu').onclick = function() {
      g_menu.showElement(this);
    }
    Q.$('test').onmouseup = function(evt) {
      alert(1);
    }
  });

  -->
  </script>
</head>
<body>
<br>
Q.Menu 示例
<hr>
<br>

<div style="border: 20px #CCC solid; position: absolute; top:200px; left: 200px; ">
  <div style="border: 10px #CCC solid; position: absolute; top:200px; left: 200px; ">
    <button id="btnMenu">下拉菜单</button>
  </div>
</div>
<br>
<br>
<!--div class="q-contextmenu" ondragstart="return false;">
  <li class="q-item" id="test">
    <div class="q-item-title"><button class="q-item-icon">&nbsp;</button>菜单一</div>
  </li>
  <li class="q-item">
    <div class="q-item-title"><button class="q-item-icon">&nbsp;</button>菜单二</div>
  </li>
  <li class="q-item-seperator">
    <div class="q-line"></div>
  </li>
  <li class="q-item q-more">
    <div class="q-item-title"><button class="q-item-icon">&nbsp;</button>子菜单xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
      &nbsp;&nbsp;&nbsp;
      
    </div>
  </li>
  <div style="clear:both;"></div>
</div-->


<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
Q.MenuBar 示例
<hr>
<br>
<div id="q-menubar" ondragstart="return false;" style="height: 30px; width: auto;">
<button class="q-item" id="menu-file">文件</button>
<button class="q-item" id="menu-edit">编辑</button>
</div>

</body>
</html>
